<template>
  <section class="main">
    <div class="title">
      <span>分账订单详情</span>
      <div>
        <el-button type="primary" @click="back()">返回</el-button>
      </div>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>交易商户号</div>
          <div>{{ SplitOrderinfo.tradeMerNo }}</div>
        </div>
        <div class="line">
          <div>交易商户名称</div>
          <div>{{ SplitOrderinfo.tradeMerName }}</div>
        </div>
        <div class="line">
          <div>创建时间</div>
          <div>{{ SplitOrderinfo.createTime }}</div>
        </div>
        <div class="line">
          <div>交易订单号</div>
          <div>{{ SplitOrderinfo.tradeNo }}</div>
        </div>
        <div class="line">
          <div>分账渠道订单号</div>
          <div>{{ SplitOrderinfo.channelSplitNo }}</div>
        </div>
        <div class="line">
          <div>交易金额</div>
          <div>{{ SplitOrderinfo.trsTotalFee }}</div>
        </div>
        <div class="line">
          <div>交易手续费</div>
          <div>{{ SplitOrderinfo.trsTradeFee }}</div>
        </div>
        <div class="line">
          <div>分账手续费</div>
          <div>{{ SplitOrderinfo.trsSplitFee }}</div>
        </div>
        <div class="line">
          <div>单笔手续费</div>
          <div>{{ SplitOrderinfo.trsSplitFeePer }}</div>
        </div>
        <div class="line">
          <div>交易手续费费率</div>
          <div>{{ SplitOrderinfo.trsTradeRate }}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>手续费承担方</div>
          <div>{{ SplitOrderinfo.splitFeeMch }}</div>
        </div>
        <div class="line">
          <div>通道名称</div>
          <div>{{ SplitOrderinfo.channelName }}</div>
        </div>
        <div class="line">
          <div>分账状态</div>
          <div>{{ SplitOrderinfo.trsSplitStatus }}</div>
        </div>
        <div class="line">
          <div>分账类型</div>
          <div>{{ SplitOrderinfo.trsType }}</div>
        </div>
        <div class="line">
          <div>订单状态</div>
          <div>{{ SplitOrderinfo.payStatusCode }}</div>
        </div>
        <div class="line">
          <div>支付方式</div>
          <div>{{ SplitOrderinfo.payMode }}</div>
        </div>
        <div class="line">
          <div>交易类型</div>
          <div>{{ SplitOrderinfo.tradeType }}</div>
        </div>
        <div class="line">
          <div>档口号</div>
          <div>{{ SplitOrderinfo.shopNo }}</div>
        </div>
        <div class="line">
          <div>租户名称</div>
          <div>{{ SplitOrderinfo.shopName }}</div>
        </div>
      </div>
    </div>

    <div class="title">
      <span>分账明细</span>
    </div>
    <div class="container">
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="SplitAccountDetailsArr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="分账商户名称?分账商户号"
            align="center"
            :render-header="renderheader"
            width="240"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.splitMerName }}</div>
              <div>
                {{ scope.row.splitMerNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="settleTime"
            label="分账时间"
            align="center"
            width="160"
          ></el-table-column>
          <el-table-column
            label="分账流水号?交易订单号"
            align="center"
            :render-header="renderheader"
            width="255"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.splitNo }}</div>
              <div>
                {{ scope.row.tradeNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopNo"
            label="档口号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="shopName"
            label="租户名称"
            align="center"
          ></el-table-column>
          <el-table-column
            label="订单金额?分账金额"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.trsTotalFee }}</div>
              <div>
                {{ scope.row.trsSplitFee }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="trsBearFee"
            label="分账手续费"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="trsIsSplit"
            label="分账状态"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>

<script>
import { APIESplitOrderDetails } from "@/api/api";
import { maniOrderDetail } from "@/api/maniaccount/maniaccount";
export default {
  name: "indentdetails",

  data() {
    return {
      DivideAccountsId: "",
      bufa: false,
      bufaobj: {
        notifyUrl: "",
      },
      SplitOrderinfo: "",
      SplitAccountDetailsArr: [],
      refundarr: [],
      loading: true,
      id: "",
      code: "",
      originalTable: false,
      freezeTable: false,
      originalArr: [],
      freezeArr: [],
      orderNum: "",
      goodsInfo: [],
      discountInfo: {},
      isGoods: false,
      isDiscount: false,
      isCode: false,
    };
  },
  created() {
    this.getDetil();
    this.DivideAccountsId = sessionStorage.getItem("id");
    console.log(" this.DivideAccountsId", this.DivideAccountsId);
    window.addEventListener(
      "Interactive_request",
      this.AcceptTransactionOrder.bind(this)
    );
    // window.addEventListener('Interactive_request')
  },

  methods: {
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #EEEDEE;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
    AcceptTransactionOrder() {
      this.getDetil();
    },
    getDetil() {
      this.$nextTick(function () {
        let { id } = this.$router.history.current.params;
        if (!id)
          return this.getESplitOrderDetails(sessionStorage.getItem("id"));
        this.DivideAccountsId = id;
        this.getESplitOrderDetails(this.DivideAccountsId);
      });
    },
    getESplitOrderDetails(a) {
      APIESplitOrderDetails(a).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code != 200) {
          this.$message.error(res.message);
        } else {
          this.SplitAccountDetailsArr = res.data.tradeSplitDOList;
          this.SplitOrderinfo = res.data;
        }
      });
    },

    back() {
      this.$router.back(-1);
    },
  },
};
</script>

<style scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 25%;
  text-align: left;
  word-break: break-all;
}
.container .itemBox .line div:nth-child(2) {
  width: 75%;
  text-align: left;
  color: #888888;
  word-break: break-all;
}
.container .payBox {
  width: 100%;
}
.container .payBox .thead {
  border-bottom: 1px solid #dddddd;
  display: flex;
  padding-top: 15px;
}
.container .payBox .thead span {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.container .payBox .tbody {
  display: flex;
  padding: 15px 0;
}
.container .payBox .tbody div {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tabbox {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
}
.tableBox {
  width: 95%;
  margin: 0 auto;
}
.red {
  color: red;
}
.magin {
  margin-left: 5px;
}
.discountBox {
  display: flex;
}
.container .discountBox .line div:nth-child(1) {
  width: 25%;
}
.container .discountBox {
  width: 100%;
}
.goods-container {
  display: block;
}
</style>
